<script setup>
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/modules/userStore';
import { Empty,Button } from 'vant';

const router = useRouter();
const userStore = useUserStore();

const logout = () => {
    userStore.logout();
    // 跳转
    router.push({ path: '/login' });
};
</script>

<template>
    <div class="error">
        <Empty image="network" image-size="200" style="height: 100%;">
            <div class="error-wrapper">
                <h1 class="error__heading">404</h1>
                <p class="error__description">找不到页面</p>
                <Button round type="primary" @click="logout">返回自动登录页面</Button>
            </div>
        </Empty>
    </div>
</template>

<style scoped lang="scss">
.error {
    width: 100vw;
    height: 100vh;
    font-size: large;
    color: #666;

    &-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    &__heading {
        font-size: 50rem;
        margin-bottom: 20rem;
    }

    &__description {
        margin-bottom: 20rem;
    }
}
</style>
